<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>诉求记录</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="./public/css/sm.css">
    <link rel="stylesheet" href="./public/css/sm-extend.css">
    <link rel="stylesheet" href="./public/css/self.css">

    <link href="https://cdn.bootcss.com/layer/3.1.0/mobile/need/layer.css" rel="stylesheet">
    <!-- 阿里图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_461630_gzzo6v21fgxmvx6r.css">


    <link rel="stylesheet" href="http://t.amazeui.org/ks.fef30.min.css">


    <script src="./public/js/zepto.js?rand=274"></script>

</head>
<body>

<div class="page-group" style="background: #fff">
    <div id="page-fixed-tab-infinite-scroll" class="page page-current" interAddress="api/wxapi/workorder/getlist">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back" href="javascript:history.go(-1)" id="back">
                <span class="iconfont icon-fanhui1"></span>
                返回
            </a>
            <h1 class="title">投诉详情</h1>
        </header>

        <div class="content" id="content-list">
            <div class="list-block media-list self-list-block" style="font-size: .85rem">
                <ul class="list-container">
                    <!-- 加载的item内容 -->
                    <li class="item-content">
                        <div class="item-inner">
                            <div>
                                <div style="line-height:180%">投诉标题：<span id="newstitle">暂无…</span>
                                </div>
                                <div style="line-height:180%">投诉编号：<span id="businumber">暂无…</span>
                                </div>
                                <div style="line-height:180%">投诉时间：<span id="createtime">暂无…</span>
                                </div>
                                <div style="line-height:180%">事发地址：<span id="openaddress">暂无…</span>
                                </div>
                                <div style="line-height:180%">投诉内容：
                                    <span style="width: 75%;
												position: relative;												
												display: block;
												top: -1.5rem;
												margin-left: 4.5rem" id="more"></span>
                                    <a href='###' id="touch"
                                       style="display:block; position:relative; top:-30px; text-align:right; right:5px">点击展开
                                        ﹀</a>
                                    <a href='###' id="tousuo"
                                       style="display:none; position:relative; top:-30px; text-align:right; right:5px">点击收缩
                                        ︿</a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="group-body">
                <div style="font-size:.9rem">附件列表</div>
                <ul class="list" style="margin:.8rem 0">
                    <!-- 附件项目 -->
                </ul>
            </div>
        </div>
    </div>
</div>


<script src="./public/js/sm.js?rand=274"></script>
<script src="./public/js/sm-extend.js?rand=274"></script>
<script src="./public/js/self.js?rand=274"></script>

<script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js?rand=274"></script>

<script>
    $(function(){
        //内容显示区域
        var maxwidth = 60;//设置最多显示的字数
        var text = $("#more").text();
        if (text.length > maxwidth) {
            $("#more").text(text.substring(0, maxwidth) + '…');
            // $(this).html($(this).html()+"..."+"<a href='###'> 点击展开</a>");//如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接；
        } else {
            $("#touch,#tousuo").hide();
        }
        ;
        $("#touch").click(function () {
            $("#more").text(text);
            $("#touch").hide();
            $("#tousuo").css("display", "block");
        })
        $("#tousuo").click(function () {
            $("#more").text(text.substring(0, maxwidth) + '…');
            $("#tousuo").hide();
            $("#touch").css("display", "block");
        })
    });

    $('#content-list .evaluate').attr('orderID', getUrlParam("orderid"));//参数传递，以便评价带参跳转
    var noticeInfo = JSON.parse(sessionStorage.getItem('noticeInfo'));

    //console.log(noticeInfo);

    //对栏目内容赋值
    $('#newstitle').html(noticeInfo.orderinfo.mailtitle);//投诉标题
    $('#more').html(noticeInfo.orderinfo.mailcontent);//投诉内容
    // $('#filepath').attr('src', noticeInfo.orderinfo.filepath);
    $('#createtime').html(noticeInfo.orderinfo.mailcreatetime);//投诉时间
    $('#businumber').html(noticeInfo.orderinfo.businumber);//投诉编号
    var address = noticeInfo.orderinfo.openaddress;
    $('#openaddress').html(address?address:'暂无……');//事发地址


    //步骤集
    if (noticeInfo.processinfo.length > 0) {
        $('#processinfo-status').html(noticeInfo.processinfo[0].advicedoaction); //步骤名称
        $('#processinfo-adviceadvcontent').html(noticeInfo.processinfo[0].adviceadvcontent);//步骤内容
        $('#processinfo-adviceupdatetime').html(noticeInfo.processinfo[0].adviceupdatetime);//步骤时间
    }

    /* 附件列表 */
    var filepathlist = noticeInfo.orderinfo.filepathlist;
    var html = '';
    var type = '';//文件后缀名
    var layerContent = '';//layer内容
    var themPic = '';//缩略图
    var fjArr = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];//附件名称重命名
    //遍历显示附件列表
    $.each(filepathlist, function (index, item) {
        var filename = '附件' + fjArr[index];
        type = item.substr(item.length - 4);//文件的扩展名
        //显示缩略图
        themimg(type, 1);
        html += '<li class="item item-linked" type="' + type + '" filepath="' + item + '">' +
            '<a href="#" style="padding-left:0">' +
            '<div class="item-media">' +
            '<img width="32" src="' + themPic + '">' +
            '</div>' +
            '<div class="item-main">' +
            '<h6 class="item-title" style="font-size:.8rem">' + filename + '</h6>' +
            '<span class="iconfont icon-xiangyoujiantou item-icon" style="font-size:1rem"></span>' +
            '</div>' +
            '</a>' +
            '</li>'
    });
    $(".list").append(html);

    /*
    * 获取缩略图和layer内容
    * @param string (type:文件后缀名，them：是否是缩略图（1:缩略图, 其他：layer内容）
    * @return string 缩略图/layer内容
    */
    function themimg(type, them) {
        if (type == '.jpg' || type == '.png' || type == '.gif' || type == 'jpeg') {
            if (them == 1) {
                themPic = "public/img/huang.png";
            } else {
                layerContent = '<img src="' + them + '">';
            }
        } else if (type == '.mp3' || type == '.wav') {
            if (them == 1) {
                themPic = "public/img/zi.png";
            } else {
                layerContent = '<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="' + them + '">你的浏览器不支持audio标签</audio>';
            }
        } else if (type == ".avi" || type == ".mp4" || type == ".mov") {
            if (them == 1) {
                themPic = "public/img/lv.png";
            } else {
                layerContent = '<video style="width:100%" controlslist="" webkit-playsinline="webkit-playsinline" playsinline="playsinline" autoplay="true" poster="" src="' + them + '" type="video/mp4"></video>';
            }
        } else if (type == ".doc" || type == ".docx") {
            if (them == 1) {
                themPic = "public/img/lan.png";
            } else {
                layerContent = '<a style="display:block; padding:20px" href="' + them + '">点击下载：当前附件</a>';
            }
        } else {
        }
    }

    $('.list li').on('click', function () {
        var type = $(this).attr('type');
        var filepath = $(this).attr('filepath');
        themimg(type, filepath);
        //点击图片
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: layerContent
        });
    });

    //点击返回
    $('#back').click(function () {
        $(window).bind('beforeunload', function () {
            //sessionStorage.removeItem('noticeInfo');
        });
    });

</script>
</body>
</html>